{% extends 'big_data/base.html' %}

{% block title %}
    DashBoard
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/css/dashboard/profile.css">
{% endblock %}


{% block js %}
    <script type="text/javascript">

    function graduate(flag)
    {
        /*
            根据应届生按钮来给工作年龄动态增删。
            flag:用来判断是否是刚载入页面。
                 若不为空则增加选项，若为空则不增加选项。
         */

        var checked = document.getElementById("graduateSwitch");
        var select = document.getElementsByName('workingYear')[0];

        var options = select.getElementsByTagName('option');
        var init_length = options.length //options初始个数

        if(checked.checked)
        {

            for (var i = 2;i<init_length;i++)
            {
                select.remove(options.length-1);
            }

            options[1].innerHTML = '1年(推荐)';
        }
        else
        {
            if (flag)
            {
                 var values = ['2年','3年','4年','5年','5年以上'];
                var text = ['2年','3年','4年','5年','5年以上'];

                for(var i = 0;i<values.length;i++)
                {
                    select.options.add( new Option(text[i],values[i]));
                }
            }

        }

    }

    $(function ()
    {
        graduate(0);
        var check = document.getElementById('graduateSwitch');
        check.onclick = function () {
            clickSwitch();
            graduate(1);
        }

    });


        function profile_select(select_name,select_option)
        {
            ///根据数据库的记录使得简历选择的选项和数据库里的数据对应

            var select = document.getElementsByName(select_name)[0];
            var options = select.getElementsByTagName('option');

            var select_option = select_option;
            for(var i=0;i<options.length;i++)
            {
                var option = options[i];
                var val = option.value;
                if (val == select_option)
                {
                    option.selected = 'selected';//给option加selected属性，使选项和数据库的记录对应
                    break;
                }
            }

        }
    </script>

    <script type="text/javascript">



        $(document).ready(function () {
        $('#update_btn').click(function (event) {
            event.preventDefault();

            var form = document.getElementsByClassName('form-control')
            var keys = ['username','password','workingYear','edu','salaryWanted','name','age','sex','email','phone','address','blog','exp','glory','description','professioanlSkill','personalSkill','toolSkill']

            var data = new Object();
            var key;

            for(var i =0;i<form.length;i++)
            {
                key = keys[i];
                data[key] = form[i].value;
            }


            if(data['age'] == 'None')
            {
                data['age']=null;
            }
            if(data['phone'] == 'None')
            {
                data['phone']=null;
            }

            if(data['salaryWanted'] == 'None')
            {
                data['salaryWanted']=null;
            }

            if(data['blog'] == 'None')
            {
                data['blog']=null;
            }

            if (data['password'] == "")
            {
                alert('密码不能为空');
                return;
            }


            $.ajax({
                    type:"POST",
                    dataType:"json",
                    url:"/dashboard/profile",
                    data:data,
                    success:function(ret){
                        var message = ret.message;

                        if(message == '修改成功！')
                        {
                            for(var i=0;i<form.length;i++)
                            {
                                key = keys[i];
                                if(ret[key] == null)
                                {
                                    ret[key]='';
                                }
                                form[i].value=ret[key];
                            }

                            //修改成功后将表单内的每个组件的下方span清空
                            $('#password_span').html('&emsp;');
                            $('#email_span').html('&emsp;');
                            $('#phone_span').html('&emsp;');
                            $('#blog_span').html('&emsp;');
                            $('#age_span').html('&emsp;');
                            $('#exp_span').html('&emsp;');
                            $('#glory_span').html('&emsp;');
                            $('#description_span').html('&emsp;');
                            $('#salaryWanted_span').html('&emsp;');

                            alert('修改成功');
                        }
                        else
                        {
                            //先清空上一次的错误
                            $('#password_span').html('&emsp;');
                            $('#email_span').html('&emsp;');
                            $('#phone_span').html('&emsp;');
                            $('#blog_span').html('&emsp;');
                            $('#age_span').html('&emsp;');
                            $('#exp_span').html('&emsp;');
                            $('#glory_span').html('&emsp;');
                            $('#description_span').html('&emsp;');
                            $('#salaryWanted_span').html('&emsp;');

                            $('#password_span').html(message.password);
                            $('#email_span').html(message.email);
                            $('#phone_span').html(message.phone);
                            $('#blog_span').html(message.blog);
                            $('#age_span').html(message.age);
                            $('#exp_span').html(message.exp);
                            $('#glory_span').html(message.glory);
                            $('#description_span').html(message.description);
                            $('#salaryWanted_span').html(message.salaryWanted);
                            alert('修改失败');

                        }

                    }
                })
        })
    }
)
    </script>
{% endblock %}



{% block right_side %}


    <div id="profile">
        <h2>个人简历</h2>
        <div>
            <div class="row-form">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" value="{{ username }}" class="form-control" name="username" readonly="true">
                    <span id="username_span">&emsp;</span>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" value="{{ password }}" class="form-control" name="password" id="pw">
                    <span id="password_span">&emsp;</span>
                </div>

                <div class="form-group " id="workingYear">
                    <label>工作年龄</label>
                    <span  ><select class="form-control " name="workingYear" >
                        <option value="无工作年龄">无工作年龄</option>
                        <option value="1年">1年</option>
                        <option value="2年">2年</option>
                        <option value="3年">3年</option>
                        <option value="4年">4年</option>
                        <option value="5年">5年</option>
                        <option value="5年以上">5年以上</option>
                    </select></span>

                    <span id="workingYear_span">&emsp;</span>
                    <script>
                        var workingYear_option = "{{ workingYear | safe }}";
                        profile_select('workingYear',workingYear_option);
                    </script>
                </div>
                <div class="form-group" id="edu">
                    <label>教育水平</label>
                    <select class="form-control" name="edu">
                        <option value="高中">高中</option>
                        <option value="大专">大专</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                    </select>
                    <span id="edu_span">&emsp;</span>
                    <script type="text/javascript">
                        var edu_option = "{{ edu | safe }}";
                        profile_select('edu',edu_option);
                    </script>
                </div>


                <div class="form-group" id="salaryWanted">
                        <label>期望薪水(万/月)</label>
                        <input  value="{{ salaryWanted }}" class="form-control" name="salaryWanted" >
                        <span id="salaryWanted_span">&emsp;</span>
                </div>
            </div>


            <div class="row-form">
                <div class="form-group">
                    <label>真实姓名</label>
                    <input type="text" value="{{ name }}" class="form-control" name="name">
                    <span id="name_span">&emsp;</span>
                </div>
                <div class="form-group">
                    <label>年龄</label>
                    <input type="text" value="{{ age }}" class="form-control" name="age">
                    <span id="age_span">&emsp;</span>
                </div>

                <div class="form-group " id="sex">
                    <label>性别</label>
                    <span ><select class="form-control " name="sex" >
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select></span>

                    <span id="sex_span"></span>
                    <script>
                        var sex_option = "{{ sex | safe }}";
                        profile_select('sex',sex_option);
                    </script>
                </div>

                <div class="form-group">
                    <label>邮箱</label>
                    <input type="email" value="{{ email }}" class="form-control" name="email">
                    <span id="email_span">&emsp;</span>
                </div>
                <div class="form-group">
                    <label>手机号</label>
                    <input type="text" value="{{ phone }}" class="form-control" name="phone" maxlength="16">
                    <span id="phone_span">&emsp;</span>
                </div>
            </div>

            <div class="form-group">
                <label>工作地址(例如:上海,杭州,北京,武汉)</label>
                <input type="text" value="{{ address }}" class="form-control" name="address">
                <span id="address_span"></span>
            </div>

            <div class="form-group">
                <label>博客地址</label>
                <input type="text" value="{{ blog }}" class="form-control" name="blog">
                <span id="blog_span"></span>
            </div>

            <div class="form-group">
                <label>工作经验</label>
                <textarea   class="form-control textarea" name="exp" maxlength="300" rows="7" cols="10">{{ exp }}</textarea>
                <span id="exp_span"></span>
            </div>
             <div class="form-group">
                <label>获得荣誉</label>
                <textarea   class="form-control textarea" name="glory" maxlength="300" rows="7" cols="10">{{ glory }}</textarea>
                <span id="glory_span"></span>
            </div>
            <div class="form-group">
                <label>个人经历</label>
                <textarea   class="form-control textarea" name="description" maxlength="300" rows="7" cols="10">{{ description }}</textarea>
                <span id="description_span"></span>
            </div>

            <div class="Skill">
                 <div class="form-group">
                    <label>专业技能</label>
                    <textarea type="text" class="form-control" name="professionalSkill" readonly="true">{{ professioanlSkill }}</textarea>
                    <span id="professionalSkill_span"></span>
                </div>

                <div class="form-group" id="personalSkill_form">
                    <label>个人技能</label>
                    <textarea type="text" class="form-control" name="personalSkill" readonly="true">{{ personalSkill }}</textarea>
                    <span id="personalSkill_span"></span>
                </div>

                <div class="form-group">
                    <label>工具使用技能</label>
                    <textarea type="text" class="form-control" name="toolSkill" readonly="true">{{ toolSkill }}</textarea>
                    <span id="toolSkill_span"></span>
                </div>

            </div>



            <div class="form-group">
                <button class="btn btn-success" id="update_btn">更新个人信息</button>
            </div>

            <div class="form-group" id="profileDownload">
                <a href="/dashboard/profileDownload"><button class="btn btn-success" id="profileDownload_btn">简历下载</button></a>
            </div>
        </div>
    </div>


{% endblock %}